<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('交易记录查询')">
</head>
<body>
<nav th:replace="common::commonNav"></nav>

<main role="main" class="container">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-info">
                <p class="m-auto text-center text-light font-weight-bold">查询交易记录</p>
            </div>
            <div class="card-body">
                <form th:action="@{/deposit/transaction/record/query}" th:object="${queryVo}" th:method="get" id="form"
                      class="form-inline">
                    <input type="hidden" id="page" name="page" th:field="*{page}" value="1">
                    <fieldset class="form-group">
                        <label class="mr-sm-4 mb-0" for="beginTime">开始时间</label>
                        <input th:field="*{beginTime}" type="datetime-local" class="form-control mr-sm-4 mb-2 mb-sm-0"
                               id="beginTime"
                               name="beginTime"/>
                    </fieldset>
                    <fieldset class="form-group">
                        <label class="mr-sm-4 mb-0" for="endTime">结束时间</label>
                        <input th:field="*{endTime}" type="datetime-local" class="form-control mr-sm-4 mb-2 mb-sm-0"
                               id="endTime"
                               name="endTime"/>
                    </fieldset>
                    <fieldset class="form-group">
                        <label class="mr-sm-4 mb-0" for="currency">币种</label>
                        <select th:field="*{currency}" class="form-control mr-sm-4 mb-2 mb-sm-0" id="currency"
                                name="currency">
                            <option value="">
                                <span>全部</span>
                            </option>
                            <option th:each="currency : ${currencyList}" th:value="${currency.code}">
                                <span th:text="${currency.name}"></span>
                            </option>
                        </select>
                    </fieldset>
                    <fieldset class="form-group">
                        <label class="mr-sm-4 mb-0" for="type">交易类型</label>
                        <select th:field="*{type}" class="form-control mr-sm-4 mb-2 mb-sm-0" id="type" name="type">
                            <option value="">
                                <span>全部</span>
                            </option>
                            <option th:each="type : ${typeList}" th:value="${type.code}">
                                <span th:text="${type.name}"></span>
                            </option>
                        </select>
                    </fieldset>
                    <fieldset class="form-group ml-5 mt-4">
                        <button type="submit" class="btn btn-info">点击查询</button>
                    </fieldset>
                </form>

                <hr class="featurette-divider bg-info">

                <div th:if="${show} eq false" class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <p>暂无符合条件的交易记录。</p>
                </div>
                <div th:if="${show} eq true" class="table-responsive">
                    <table class="table table-hover">
                        <thead class="thead-default">
                        <tr>
                            <th>银行卡号码</th>
                            <th>币种</th>
                            <th>交易金额</th>
                            <th>交易时间</th>
                            <th>交易类型</th>
                            <th>交易方</th>
                            <th>交易地点</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="record : ${recordPage.pageContent}">
                            <td th:text="${record.bankcardId}"></td>
                            <td th:text="${record.currencyCode}"></td>
                            <td th:text="${record.money}"></td>
                            <td th:text="${record.transactionTime}"></td>
                            <th:block th:switch="${record.type}">
                                <td th:case="0" th:text="转账支出"></td>
                                <td th:case="1" th:text="外汇兑换支出"></td>
                                <td th:case="2" th:text="转账存入"></td>
                                <td th:case="3" th:text="外汇兑换存入"></td>
                                <td th:case="4" th:text="存款利息存入"></td>
                                <td th:case="5" th:text="存款存入"></td>
                            </th:block>
                            <td th:text="${record.transactionPeople}"></td>
                            <td th:text="${record.transactionPlace}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div th:if="${show} eq true" class="m-auto">
                <div class="mt-3">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item">
                                <a th:onclick="previous()" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li th:id="'li_'+${i}" class="page-item"
                                th:each="i : ${#numbers.sequence(1,recordPage.pageSize)}">
                                <a th:id="${i}" onclick="turnTo(this)" class="page-link">
                                    <span th:text="${i}"></span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a onclick="next()" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</main>
<script th:if="${recordPage} ne null" th:inline="javascript">
    var pageIndex = [[${recordPage.pageIndex}]];
    var pageSize = [[${recordPage.pageSize}]];
    $('#li_' + pageIndex).addClass('active');

    function previous() {
        var page = pageIndex - 1;
        if (page === 0) {
            alert('当前已经是第一页了。')
        } else {
            $('#page').val('' + page);
            $('#form').submit();
        }
    }

    function next() {
        var page = pageIndex + 1;
        if (page > pageSize) {
            alert('当前已经是最后一页了。')
        } else {
            $('#page').val('' + page);
            $('#form').submit();
        }
    }

    function turnTo(obj) {
        var page = obj.id;
        $('#page').val('' + page);
        $('#form').submit();
    }
</script>
</body>
</html>